/****总容器***/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: gray;
}

/* 侧边栏菜单 */
.wrapper .sidenav {
  height: 100%;
  /* 全屏高度：如果您想要“自动”高度，请删除此设置 */
  width: 12vw;
  /* 设置侧边栏的宽度 */
  position: fixed;
  /* 固定侧边栏（在滚动时保持在原位） */
  z-index: 1;
  /* 始终保持在顶部 */
  top: 0;
  /* 始终保持在顶部 */
  left: 0;
  background-color: transparent;
  /* 灰色 */
  overflow-x: hidden;
  /* 禁用水平滚动 */
  padding-top: 20px;
}

/* 导航菜单链接 */
.wrapper .sidenav a{
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.2vw;
  color: #020000;
  display: block;
  text-align: center;
}

.wrapper .sidenav button{
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  width: 12vw;
  font-size: 1.2vw;
  color: #020000;
  display: block;
  border: none;
  background-color: transparent;
}

.wrapper .sidenav button:hover {
  color: #be0505;
  background-color: #d2c4c4;
}


/* 当您将鼠标悬停在导航链接上时，更改其颜色 */
.wrapper .sidenav a:hover {
  color: #be0505;
  background-color: #d2c4c4;
}


.wrapper .bottom {
  z-index: 9999;
  height: 11vh;
  width: 100%;
  background-color: transparent;
  position: fixed;
  bottom: 0;
  border-top: solid 1px rgb(155, 142, 142);
  right: 0.2vw;
  /*对不齐，不知道为什么*/
}

.wrapper .bottom .left {
  display: flex;
  align-items: center;
}

.wrapper .bottom .left img {
  width: 9h;
  height: 9vh;
  margin-left: 2vw;
  padding: 1vh 0;
}

.wrapper .bottom .left .cur_song {
  font-size: 2vh;
  font-weight: bold;
  margin-left: 1vw;
}

/*进度条*/
.wrapper .bottom .progress-container {
  position: absolute;
  width: 40%;
  height: 0.3vw;
  left: 34vw;
  top: 8.5vh;
  background-color: #e0d4d4;
  border-radius: 5px;
}

.wrapper .bottom .progress-container .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #007bff;
  width: 0;
  border-radius: 5px;
}

.wrapper .bottom .buttons {
  position: fixed;
  left: 48vw;
  bottom: 5vh;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  gap: 2vw;
}

.wrapper .bottom .buttons button {
  width: 4vh;
  height: 4vh;
  background-size: cover;
  /* 使图片覆盖整个按钮 */
  background-position: center;
  /* 居中显示图片 */
  background-color: transparent;
  border: none;
  /* 去掉按钮边框 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.wrapper .up_but {
  height: 10vh;
  width: 57vw;
  position: absolute;
  left: 20vw;
}

.wrapper .up_but .lineedit {
  border-radius: 2vh;
  background-color: transparent;
  border: solid 2px black;
  height: 3vh;
}

.wrapper .up_but .lineedit::placeholder {
  color: azure;
}

.wrapper .up_but .search_but {
  border-radius: 1vh;
  height: 4vh;
  cursor:pointer;
}

.wrapper .music_list {
  height: 70vh;
  width: 47vw;
  position: absolute;
  top: 8vh;
  left: 20vw;
  background-color: transparent;
  color: rgb(224, 215, 215);
}

.wrapper .music_list td {
  height: 4vh;
}

.wrapper .music_list th {
  height: 4vh;
}

.blinking-text td, .blinking-text th, .blinking-text a{
  animation: blinking 7s linear infinite;
}

.wrapper .music_list tr:hover {
  background-color: rgb(162, 190, 190);
}

/*************************歌词部分**************************/
.wrapper .lyric {
  position: absolute;
  left: 70vw;
  width: 20vw;
  top: 8vh;
}

.wrapper .lyric .shoubi {
  width: 27vh;
  height: 27vh;
  position: absolute;
  top: -20vh;
  left: 3vw;
  z-index: 999;
  margin: auto;
  display: block;
  transform: rotate(-40deg);
  transition: .6s;
}

.wrapper .lyric .lyric_img {
  width: 20vh;
  height: 20vh;
  border-radius: 20vh;
  margin: auto;
  display: block;
  animation: infiniteRotate 48s linear infinite;
  position: relative;
}

.wrapper .lyric .container {
  z-index: -9;
  width: 20vw;
  height: 54vh;
  top: 25vh;
  background-color: transparent;
  margin: auto;
  display: block;
  overflow: hidden;
  transition: .6s;
  position: absolute;
}

.wrapper .lyric .container ul {
  width: 100%;
  margin-top: 16vh;
  padding: 0;
  transition: .6s;
}

.wrapper .lyric .container li {
  /*相关汇总：li高3vh,  container高60vh , 1:20*/
  text-align: center;
  list-style-type: none;
  font-size: 1.7vh;
  color: aliceblue;
  word-break: break-all;
  width: 100%;
}


@keyframes infiniteRotate {

  /*旋转动画*/
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.wrapper .popup {
  position: absolute;
  z-index: 999999;
  width: 20vw;
  height: 60vh;
  background-color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.wrapper .popup .title{
  background-color: #b9a4a4;
  overflow: hidden;
  height: 6vh;
  line-height: 2vh;
  display: flex;
  justify-content: space-between;
}

/* 弹窗显示时添加 show 类 */
.wrapper .popup.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(200%, 20%);
}

.wrapper .popup .settings {
  width: 100%;
  padding: 0;
  margin: 0;
}

.wrapper .popup .settings li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  border-bottom: solid 1px rgb(112, 98, 98);
  line-height: 4vh;
  padding: 0 1vw 0 1vw;
  font-family: Arial, sans-serif;
  color: #333;

  /* 开关 - 滑块周围的框 */
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  /* 隐藏默认 HTML 复选框 */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* 滑块 */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked+.slider {
    background-color: #2196F3;
  }

  input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

  /* 圆形滑块 */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
}
 

  /*颜色渐变*/
@keyframes blinking {
  0% {
    color: red;
  }
  16% {
    color: blue;
  }
  32% {
    color: purple;
  }
  48% {
    color: green;
  }
  64% {
    color: pink;
  }
  80% {
    color: black;
  }
  100% {
    color: red;
  }
}